<template>
	<view class="entirety">
		
		<view class="head">
			<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u25.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
			<view class="ziti">定制工作服</view>
		</view>
		
		<view class="content">
			
			<view class="left">
				<view class="option pitchon">
					家居服装
				</view>
				<view class="option">
					商务文具
				</view>
				<view class="option">
					家居生活
				</view>
				<view class="option">
					数码家电
				</view>
				<view class="option">
					工艺收藏
				</view>
				<view class="option">
					妈咪宝贝
				</view>
				<view class="option">
					包装材料
				</view>
				<view class="option">
					食品保健
				</view>
				<view class="option">
					箱包皮具
				</view>
				<view class="option">
					户外运功
				</view>
				<view class="option">
					汽车周边
				</view>
				<view class="option">
					彩妆美发
				</view>
			</view>
			<view class="right">
				
				<view class="search">
					<input type="text" class="input" placeholder="搜索">
				</view>
				
				<view class="information">
					
					<view class="title">
						<view >
							家居服装
						</view>
						<view >
							&gt;
						</view>
					</view>
					
					<view class="row">
						<view class="leftimg">
							<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u31.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
						</view>
						<view class="rightcontent">
							<view class="contenttop">
								polo衬衫定制工作服刺绣印<br>
								字logo企业短袖T恤文化...
							</view>
							<view class="contentbottom">
								<view class="bottomleft">
									￥30.00
								</view>
								<view class="bottomright">
									<view class="btn daxiao">
										-
									</view>
									<view class="num daxiao">
										1
									</view>
									<view class="btn daxiao">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					<view class="row">
						<view class="leftimg">
							<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u31.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
						</view>
						<view class="rightcontent">
							<view class="contenttop">
								polo衬衫定制工作服刺绣印<br>
								字logo企业短袖T恤文化...
							</view>
							<view class="contentbottom">
								<view class="bottomleft">
									￥30.00
								</view>
								<view class="bottomright">
									<view class="btn daxiao">
										-
									</view>
									<view class="num daxiao">
										1
									</view>
									<view class="btn daxiao">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					<view class="row">
						<view class="leftimg">
							<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u31.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
						</view>
						<view class="rightcontent">
							<view class="contenttop">
								polo衬衫定制工作服刺绣印<br>
								字logo企业短袖T恤文化...
							</view>
							<view class="contentbottom">
								<view class="bottomleft">
									￥30.00
								</view>
								<view class="bottomright">
									<view class="btn daxiao">
										-
									</view>
									<view class="num daxiao">
										1
									</view>
									<view class="btn daxiao">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					<view class="row">
						<view class="leftimg">
							<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u31.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
						</view>
						<view class="rightcontent">
							<view class="contenttop">
								polo衬衫定制工作服刺绣印<br>
								字logo企业短袖T恤文化...
							</view>
							<view class="contentbottom">
								<view class="bottomleft">
									￥30.00
								</view>
								<view class="bottomright">
									<view class="btn daxiao">
										-
									</view>
									<view class="num daxiao">
										1
									</view>
									<view class="btn daxiao">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="row">
						<view class="leftimg">
							<img class="img" src="https://files.axshare.com/gsc/SH5T6P/51/36/2e/51362eeb22194a59a0226b15c07720a3/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u31.png?pageId=ae419065-3ec7-4bc1-b8a0-51dd1d04ec77" alt="">
						</view>
						<view class="rightcontent">
							<view class="contenttop">
								polo衬衫定制工作服刺绣印<br>
								字logo企业短袖T恤文化...
							</view>
							<view class="contentbottom">
								<view class="bottomleft">
									￥30.00
								</view>
								<view class="bottomright">
									<view class="btn daxiao">
										-
									</view>
									<view class="num daxiao">
										1
									</view>
									<view class="btn daxiao">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					
					
					
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/* 整体 */
	/* .entirety{
		background-color: #e9e9e9;
	} */
	/* 头部图片文字样式 */
	.entirety .head{
		width: 100%;
		height: 200rpx;
		background-color: red;
		display: flex;
		align-items: center;
	}
	.entirety .head .img{
		width: 130rpx;
		height: 130rpx;
		margin-left: 20rpx;
	}
	.entirety .head .ziti{
		color: white;
		margin-left: 20rpx;
	}
	
	/* 内容部分 */
	.content{
		
		display: flex;
		width: 95%;
		height: 1300rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		
	}
	.content .left{
		width: 200rpx;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #e9e9e9;
	}
	.content .left .option{
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content .right{
		flex:1;
		background-color: whitesmoke;
	}
	.content .right .search{
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
	.content .right .search .input{
		background-color: white;
		text-align: center;
		width: 450rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}
	.content .right .information{
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		
	}
	.content .right .information .title{
		display: flex;
		justify-content: space-between;
	}
	.row{
		display: flex;
		font-size: 10px;
		margin-top: 20rpx;
	}
	
	.row .leftimg .img{
		width: 150rpx;
		height: 150rpx;
	}
	.bottomright{
		display: flex;
	}
	.bottomright .btn{
		width: 30rpx;
		height: 30rpx;
		background-color: red;
		color: white;
		border-radius: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottomright .daxiao{
		margin: 10rpx;
	}
	.bottomleft{
		color: red;
		font-size: 30rpx;
	}
	.contentbottom{
		display: flex;
		justify-content: space-between;
	}
	.rightcontent{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	/* 左边选择栏选中样式 */
	.pitchon{
		color: red;
		background-color: white;
		font-weight: bold; 	
		border-left: 5rpx solid red;
	}
</style>
